<template>
	<div class="app-container">
		<el-row :gutter="20" v-loading="loading">
			<!--设备数据-->
			<el-col :span="4" :xs="24">
				<div class="head-container">
<!--					<el-input v-model="deptName" placeholder="请输入设备名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />-->
				</div>
				<div class="head-container">
					<el-tree :data="devices" :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false"
                     :default-expanded-keys="defaultExpandedKeys"
                    node-key="uuid"
					ref="deptTreeRef" highlight-current default-expand-all="true" @node-click="handleNodeClick" />
				</div>
			</el-col>
			<!--视频页面-->
			<el-col :span="20" :xs="24">
        <el-row :span="20" style="padding-left:20px;background: #5a5e66;height: 60px;padding-top:14px">
          <dev style="margin-right: 13px;margin-top: 5px;color: #fff">分屏</dev>
          <el-button :type="pattern==1 ? 'primary' : 'info'" icon="full-screen" circle @click="patternShow(1)"></el-button>
          <el-button :type="pattern==2 ? 'primary' : 'info'" icon="menu" circle @click="patternShow(2)"></el-button>
          <el-button :type="pattern==3 ? 'primary' : 'info'" icon="grid" circle @click="patternShow(3)"></el-button>
        </el-row>
        <el-row :span="20">
          <el-col v-for="(item, index) in playerDevices"
                  v-show="showVideo(index)"
                  :span="getSpanValve"
                  @click="checkedVideo(item)"
                  style="padding: 3px 3px;"
                  :class="selectVideo == item.id ? 'border' : ''"
          >
            <video
                :ref='item.id'
                class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
                preload="auto"
                poster="@/assets/images/oceans.png"
                data-setup='{}'
                controls
                muted
            >
              <source type="video/mp4" />

              <p class="vjs-no-js">
                要观看此视频
              </p>
            </video>
          </el-col>

        </el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="video">
import {ref, onMounted, getCurrentInstance, watch, nextTick, onBeforeUnmount} from "vue";
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
import {getChannelList, getDeviceList, start, stopDevice} from "@/api/monitoring/monitoring";
  const { proxy } = getCurrentInstance();

  const loading = ref(true)

  const devices = ref([])
  const defaultExpandedKeys = ref([])
  let pattern = ref(1),maxPlay = 1;
  const selectVideo = ref("")
  const getSpanValve = ref(24)

  const playerDevices = ref([])
  const playerDevicesMap = new Map()


  /**
   * 初始化视频
   */
  async function initVideoList(){
    for(let i=0;i<9;i++){
      let v = {
        id: "video_play" + (i+1),
        index: i,
        src: "",
        video: null,
        deviceId:"",
        channelId:"",
      };
      playerDevices.value.push(v)
      playerDevicesMap.set(v.id,v)
    }

    await nextTick(()=>{
        videojs.addLanguage('zh-cn', {
          "Play": "播放", "Pause": "暂停", "Current Time": "当前时间", "Duration": "时长", "Remaining Time": "剩余时间", "Stream Type": "媒体流类型", "LIVE": "直播", "Loaded": "加载完成", "Progress": "进度", "Fullscreen": "全屏", "Exit Fullscreen": "退出全屏", "Picture-in-Picture": "画中画", "Exit Picture-in-Picture": "退出画中画", "Mute": "静音", "Unmute": "开启音效", "Playback Rate": "播放速度", "Subtitles": "字幕", "subtitles off": "关闭字幕", "Captions": "内嵌字幕", "captions off": "关闭内嵌字幕", "Chapters": "节目段落", "Close Modal Dialog": "关闭弹窗", "Descriptions": "描述", "descriptions off": "关闭描述", "Audio Track": "音轨",
          "You aborted the media playback": "视频播放被终止", "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
          "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
          "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
          "No compatible source was found for this media.": " ", "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。", "Play Video": "播放视频", "Close": "关闭", "Modal Window": "弹窗", "This is a modal window": "这是一个弹窗", "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
          ", opens captions settings dialog": ", 开启标题设置弹窗", ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
          ", opens descriptions settings dialog": ", 开启描述设置弹窗", ", selected": ", 选择", "captions settings": "字幕设定", "Audio Player": "音频播放器", "Video Player": "视频播放器", "Replay": "重新播放", "Progress Bar": "进度条", "Volume Level": "音量", "subtitles settings": "字幕设定", "descriptions settings": "描述设定",
          "Text": "文字", "White": "白", "Black": "黑", "Red": "红", "Green": "绿", "Blue": "蓝", "Yellow": "黄", "Magenta": "紫红", "Cyan": "青", "Background": "背景", "Window": "窗口", "Transparent": "透明", "Semi-Transparent": "半透明", "Opaque": "不透明",
          "Font Size": "字体尺寸", "Text Edge Style": "字体边缘样式", "None": "无", "Raised": "浮雕", "Depressed": "压低", "Uniform": "均匀", "Dropshadow": "下阴影", "Font Family": "字体库", "Proportional Sans-Serif": "比例无细体", "Monospace Sans-Serif": "单间隔无细体",
          "Proportional Serif": "比例细体", "Monospace Serif": "单间隔细体", "Casual": "舒适", "Script": "手写体", "Small Caps": "小型大写字体", "Reset": "重置", "restore all settings to the default values": "恢复全部设定至预设值",
          "Done": "完成", "Caption Settings Dialog": "字幕设定窗口", "Beginning of dialog window. Escape will cancel and close the window.": "打开对话窗口。Escape键将取消并关闭对话窗口",
          "End of dialog window.": "结束对话窗口", "Seek to live, currently behind live": "尝试直播，当前为延时播放", "Seek to live, currently playing live": "尝试直播，当前为实时播放", "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
          "{1} is loading.": "正在加载 {1}。", "No content": "无内容", "Color": "颜色", "Opacity": "不透明度", "Text Background": "文本背景", "Caption Area Background": "字幕区域背景",
          "Skip forward {1} seconds": "快进 {1} 秒", "Skip backward {1} seconds": "快退 {1} 秒"
        });
      initVideo();

    })
  }

/**
 * 节点点击事件
 * @param nodeData
 */
function handleNodeClick(nodeData) {
    loading.value = true
    if(nodeData.level === 0){
      getPassage(nodeData)
      return
    }

    if(nodeData.level === 1){
      getMP4(nodeData)
      return
    }
};

  /**
   * 初始化视频
   */
  function initVideo(){
    let options = {
      width: 500,
      height: 450,
      controls: true,
      autoplay: true,
      localize:'zh-cn',
      liveui: true, // 启用直播 UI
      muted : true,
      techOrder: ['html5'] // HLS 支持通常在 HTML5 播放器中
    }
    playerDevices.value.forEach(item=> {
      let vjs = videojs(proxy.$refs[item.id][0], options);
      vjs.on('ended', function () {
        videojs.log('播放结束!');
      });
      console.log("添加视频")
      item.video = vjs
      playerDevicesMap.set(item.id, item)
    });
  }

  /**
   *获取设备列表
   */
  function getDevices(){
    // devices.value = [
    //   {
    //     "deviceId": "34020000001110000099",
    //     "name": "Network Video Recorder",
    //     "manufacturer": "HIKVISION",
    //     "model": "DS-7808N-Z2/X(B)",
    //     "firmware": "V4.82.007",
    //     "transport": "UDP",
    //     "streamMode": "UDP",
    //     "ip": "192.168.1.10",
    //     "port": 8116,
    //     "hostAddress": "192.168.1.10:8116",
    //     "onLine": true,
    //     "registerTime": "2024-08-12 15:00:15",
    //     "keepaliveTime": "2024-08-12 15:05:14",
    //     "keepaliveIntervalTime": 0,
    //     "channelCount": 5,
    //     "expires": 86400,
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:05:14",
    //     "mediaServerId": null,
    //     "charset": "GB2312",
    //     "subscribeCycleForCatalog": 0,
    //     "subscribeCycleForMobilePosition": 0,
    //     "mobilePositionSubmissionInterval": 5,
    //     "subscribeCycleForAlarm": 0,
    //     "ssrcCheck": false,
    //     "geoCoordSys": "WGS84",
    //     "password": null,
    //     "sdpIp": null,
    //     "localIp": "192.168.1.10",
    //     "asMessageChannel": false,
    //     "broadcastPushAfterAck": false,
    //     "streamModeForParam": 0
    //   }
    // ]
    //
    // devices.value.forEach(d=>{
    //   d.uuid = uuidv4()
    //   d.level = 0
    // })

    getDeviceList().then(response => {
      loading.value = false
      devices.value = response.data
      devices.value.forEach(d=>{
        d.uuid = d.deviceId
        d.level = 0
      })
    }).catch(e=>{
      loading.value = false
    })
  }

  /**
   * 获取通道列表
   * @param nodeData
   */
  function getPassage(nodeData){
    // let treeDataForPreview = [
    //   {
    //     "id": 5,
    //     "channelId": "34020000001320000001",
    //     "deviceId": "34020000001110000099",
    //     "name": "IPCamera 05",
    //     "manufacture": "Manufacturer",
    //     "model": "Camera",
    //     "owner": "Owner",
    //     "civilCode": null,
    //     "block": null,
    //     "address": "0.0.0.0",
    //     "parental": 0,
    //     "parentId": "34020000001110000099",
    //     "safetyWay": 0,
    //     "registerWay": 1,
    //     "certNum": null,
    //     "certifiable": 0,
    //     "errCode": 0,
    //     "endTime": null,
    //     "secrecy": "0",
    //     "ipAddress": null,
    //     "port": 0,
    //     "password": null,
    //     "ptzType": 3,
    //     "ptzTypeText": "固定枪机",
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:00:15",
    //     "status": false,
    //     "longitude": 0,
    //     "latitude": 0,
    //     "customLongitude": 0,
    //     "customLatitude": 0,
    //     "longitudeGcj02": 0,
    //     "latitudeGcj02": 0,
    //     "longitudeWgs84": 0,
    //     "latitudeWgs84": 0,
    //     "subCount": 0,
    //     "streamId": null,
    //     "hasAudio": false,
    //     "channelType": 0,
    //     "businessGroupId": null,
    //     "gpsTime": "2024-08-12 15:00:15",
    //     "streamIdentification": null
    //   },
    //   {
    //     "id": 1,
    //     "channelId": "34020000001320000011",
    //     "deviceId": "34020000001110000099",
    //     "name": "IPCamera 03",
    //     "manufacture": "Manufacturer",
    //     "model": "Camera",
    //     "owner": "Owner",
    //     "civilCode": null,
    //     "block": null,
    //     "address": "192.168.1.11",
    //     "parental": 0,
    //     "parentId": "34020000001110000099",
    //     "safetyWay": 0,
    //     "registerWay": 1,
    //     "certNum": null,
    //     "certifiable": 0,
    //     "errCode": 0,
    //     "endTime": null,
    //     "secrecy": "0",
    //     "ipAddress": null,
    //     "port": 0,
    //     "password": null,
    //     "ptzType": 1,
    //     "ptzTypeText": "球机",
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:00:15",
    //     "status": true,
    //     "longitude": 0,
    //     "latitude": 0,
    //     "customLongitude": 0,
    //     "customLatitude": 0,
    //     "longitudeGcj02": 0,
    //     "latitudeGcj02": 0,
    //     "longitudeWgs84": 0,
    //     "latitudeWgs84": 0,
    //     "subCount": 0,
    //     "streamId": null,
    //     "hasAudio": false,
    //     "channelType": 0,
    //     "businessGroupId": null,
    //     "gpsTime": "2024-08-12 15:00:15",
    //     "streamIdentification": null
    //   },
    //   {
    //     "id": 2,
    //     "channelId": "34020000001320000012",
    //     "deviceId": "34020000001110000099",
    //     "name": "IPCamera 04",
    //     "manufacture": "Manufacturer",
    //     "model": "Camera",
    //     "owner": "Owner",
    //     "civilCode": null,
    //     "block": null,
    //     "address": "192.168.1.12",
    //     "parental": 0,
    //     "parentId": "34020000001110000099",
    //     "safetyWay": 0,
    //     "registerWay": 1,
    //     "certNum": null,
    //     "certifiable": 0,
    //     "errCode": 0,
    //     "endTime": null,
    //     "secrecy": "0",
    //     "ipAddress": null,
    //     "port": 0,
    //     "password": null,
    //     "ptzType": 1,
    //     "ptzTypeText": "球机",
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:00:15",
    //     "status": true,
    //     "longitude": 0,
    //     "latitude": 0,
    //     "customLongitude": 0,
    //     "customLatitude": 0,
    //     "longitudeGcj02": 0,
    //     "latitudeGcj02": 0,
    //     "longitudeWgs84": 0,
    //     "latitudeWgs84": 0,
    //     "subCount": 0,
    //     "streamId": null,
    //     "hasAudio": false,
    //     "channelType": 0,
    //     "businessGroupId": null,
    //     "gpsTime": "2024-08-12 15:00:15",
    //     "streamIdentification": null
    //   },
    //   {
    //     "id": 3,
    //     "channelId": "34020000001320000013",
    //     "deviceId": "34020000001110000099",
    //     "name": "IPCamera 01",
    //     "manufacture": "Manufacturer",
    //     "model": "Camera",
    //     "owner": "Owner",
    //     "civilCode": null,
    //     "block": null,
    //     "address": "192.168.1.13",
    //     "parental": 0,
    //     "parentId": "34020000001110000099",
    //     "safetyWay": 0,
    //     "registerWay": 1,
    //     "certNum": null,
    //     "certifiable": 0,
    //     "errCode": 0,
    //     "endTime": null,
    //     "secrecy": "0",
    //     "ipAddress": null,
    //     "port": 0,
    //     "password": null,
    //     "ptzType": 1,
    //     "ptzTypeText": "球机",
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:00:15",
    //     "status": true,
    //     "longitude": 0,
    //     "latitude": 0,
    //     "customLongitude": 0,
    //     "customLatitude": 0,
    //     "longitudeGcj02": 0,
    //     "latitudeGcj02": 0,
    //     "longitudeWgs84": 0,
    //     "latitudeWgs84": 0,
    //     "subCount": 0,
    //     "streamId": null,
    //     "hasAudio": false,
    //     "channelType": 0,
    //     "businessGroupId": null,
    //     "gpsTime": "2024-08-12 15:00:15",
    //     "streamIdentification": null
    //   },
    //   {
    //     "id": 4,
    //     "channelId": "34020000001320000014",
    //     "deviceId": "34020000001110000099",
    //     "name": "IPCamera 02",
    //     "manufacture": "Manufacturer",
    //     "model": "Camera",
    //     "owner": "Owner",
    //     "civilCode": null,
    //     "block": null,
    //     "address": "192.168.1.14",
    //     "parental": 0,
    //     "parentId": "34020000001110000099",
    //     "safetyWay": 0,
    //     "registerWay": 1,
    //     "certNum": null,
    //     "certifiable": 0,
    //     "errCode": 0,
    //     "endTime": null,
    //     "secrecy": "0",
    //     "ipAddress": null,
    //     "port": 0,
    //     "password": null,
    //     "ptzType": 1,
    //     "ptzTypeText": "球机",
    //     "createTime": "2024-08-12 15:00:15",
    //     "updateTime": "2024-08-12 15:00:15",
    //     "status": true,
    //     "longitude": 0,
    //     "latitude": 0,
    //     "customLongitude": 0,
    //     "customLatitude": 0,
    //     "longitudeGcj02": 0,
    //     "latitudeGcj02": 0,
    //     "longitudeWgs84": 0,
    //     "latitudeWgs84": 0,
    //     "subCount": 0,
    //     "streamId": null,
    //     "hasAudio": false,
    //     "channelType": 0,
    //     "businessGroupId": null,
    //     "gpsTime": "2024-08-12 15:00:15",
    //     "streamIdentification": null
    //   }
    // ]
    // treeDataForPreview.forEach(d=>{
    //   d.uuid = uuidv4()
    //   d.level=1
    // })
    // console.log('Tree data for preview: ',treeDataForPreview)
    // proxy.$refs.deptTreeRef.updateKeyChildren(nodeData.uuid, treeDataForPreview)
    // // 展开当前节点
    // defaultExpandedKeys.value = [nodeData.uuid]

    getChannelList(nodeData.deviceId).then(res=>{
      loading.value = false
      res.data.forEach(d=>{
         d.uuid = d.channelId,
         d.level=1
      })
      proxy.$refs.deptTreeRef.updateKeyChildren(nodeData.uuid, res.data)
      // 展开当前节点
      defaultExpandedKeys.value = [nodeData.uuid]
    }).catch(e=>{
      loading.value = false
    })
  }

  //获取视频
  function getMP4(nodeData){
    console.log('getMP4')
    // let item = {
    //   "app": "rtp",
    //   "stream": "34020000001110000099_34020000001320000014",
    //   "ip": null,
    //   "flv": "http://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014.live.flv",
    //   "https_flv": null,
    //   "ws_flv": "ws://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014.live.flv",
    //   "wss_flv": null,
    //   "fmp4": "//vjs.zencdn.net/v/oceans.mp4",
    //   "https_fmp4": "https://192.168.1.108:443/rtp/34020000001110000099_34020000001320000014.live.mp4",
    //   "ws_fmp4": "ws://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014.live.mp4",
    //   "wss_fmp4": "wss://192.168.1.108:443/rtp/34020000001110000099_34020000001320000014.live.mp4",
    //   "hls": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
    //   "https_hls": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
    //   "ws_hls": "ws://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014/hls.m3u8",
    //   "wss_hls": "wss://192.168.1.108:443/rtp/34020000001110000099_34020000001320000014/hls.m3u8",
    //   "ts": "http://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014.live.ts",
    //   "https_ts": "https://192.168.1.108:443/rtp/34020000001110000099_34020000001320000014.live.ts",
    //   "ws_ts": "ws://192.168.1.108:9092/rtp/34020000001110000099_34020000001320000014.live.ts",
    //   "wss_ts": null,
    //   "rtmp": "rtmp://192.168.1.108:1935/rtp/34020000001110000099_34020000001320000014",
    //   "rtmps": null,
    //   "rtsp": "rtsp://192.168.1.108:554/rtp/34020000001110000099_34020000001320000014",
    //   "rtsps": null,
    //   "rtc": "http://192.168.1.108:9092/index/api/webrtc?app=rtp&stream=34020000001110000099_34020000001320000014&type=play",
    //   "rtcs": "https://192.168.1.108:443/index/api/webrtc?app=rtp&stream=34020000001110000099_34020000001320000014&type=play",
    //   "mediaServerId": "zlmediakit-local",
    //   "startTime": null,
    //   "endTime": null,
    //   "transcodeStream": null,
    //   "progress": 0
    // }
    // addressPlay(item)
    start(nodeData.deviceId,nodeData.channelId).then(res=>{
      let item = res.data
      item.uuid = nodeData.deviceId+"&"+nodeData.channelId
      item.deviceId = nodeData.deviceId
      item.channelId = nodeData.channelId
      addressPlay(item)
    }).catch(e=>{
      loading.value = false
    })

    setTimeout(()=>{
      loading.value = false
    },5*1000)
  }

  /**
   * 播放地址赋值
   * @param item
   * @returns {Promise<void>}
   */
  async function addressPlay(item) {
    let v = playerDevicesMap.get(selectVideo.value)
    if(v){
      console.log("选中切换")
      setVideoSrc(v,item)
      return
    }
    let num = pattern.value == 1 ? 1 : pattern.value == 2 ? 4 : 9;
    for(let index=0; index<playerDevices.value.length; index++) {
      if (index >= num) {
        break
      }
      let vm = playerDevices.value[index]
      if (vm.src != '') {
        continue
      }
      console.log("空缺切换")
      setVideoSrc(vm,item)
      return
    }
    console.log("第一个切换")
    setVideoSrc(playerDevices.value[0],item)
  }

  /**
   * 设置视频地址
   * @param vm
   * @param item
   */
  function setVideoSrc(vm,item){
    stopVideo(vm.deviceId,vm.channelId).then(()=>{
      console.log("======>")
      vm.src = item.fmp4
      vm.video.src(item.fmp4)
      vm.deviceId = item.deviceId
      vm.channelId = item.channelId
      videoReady(vm.video)
      setTimeout(() => {
        vm.video.play()
        loading.value = false
      }, 666)
      playerDevicesMap.set(vm.id, vm)
      playerDevices.value[vm.index] = vm;
    });
  }

  /**
   * 选择视频
   * @param item
   */
  function checkedVideo(item){
    if(selectVideo.value == item.id){
      selectVideo.value = ''
      return
    }
    selectVideo.value = item.id
  }

  /**
   * 模式切换
   * @param m
   */
  function patternShow(m){
    // let v = null
    // let span = 24;
    // if(m == 1){
    //   maxPlay = 1;
    //   span = 24;
    // }else if(m == 2){
    //   maxPlay = 4;
    //   span = 11;
    // }else{
    //   maxPlay = 9;
    //   span = 7;
    // }
    //
    // playerDevices.value.forEach(item => {
    //   if(item.id == selectVideo.value){
    //     v = item;
    //   }
    //   item.span = span
    // })
    //
    //
    // //if(v)playerDevices.value.unshift(v);
    // playerDevices.value.length = playerDevices.value.length>maxPlay ? maxPlay : playerDevices.value.length
    pattern.value = m
    let num = pattern.value == 1 ? 1 : pattern.value == 2 ? 4 : 9;
    for(let i=0;i<playerDevices.value.length;i++){
      let v = playerDevices.value[i]
      if(i<num){
        continue
      }
      if(v.src != ''){
        console.log("开始销毁")
        v.video.pause()
        v.src = ''
        v.video.src('')
        playerDevicesMap.set(v.id,v)
        playerDevices.value[v.index] = v;
        break;
      }
    }
    getSpan()
  }

/**
 * 控制显示模式
 * @param index
 * @returns {boolean}
 */
function showVideo(index){
    if(pattern.value == 1){
      return index<1
    }
    if(pattern.value == 2){
      return index<4
    }
    if(pattern.value == 3){
      return index<9
    }
  }

  /**
   * 改变占用空间
   * @returns {number}
   */
  function getSpan(){
    if(pattern.value == 1){
      getSpanValve.value = 24
    }
    if(pattern.value == 2){
      getSpanValve.value = 12
    }
    if(pattern.value == 3){
      getSpanValve.value = 8
    }
  }

  //销毁video
  function destroyVideo(){
    playerDevices.value.forEach(v=>{
      if(v){
        v.video.dispose()
        stopVideo(v.deviceId,v.channelId);
      }
    })
  }

  /**
   * 停止推流
   * @param deviceId
   * @param channelId
   */
 function stopVideo(deviceId,channelId){
    return new Promise((resolve, reject) => {
      if(!deviceId || !channelId){
        resolve()
        return
      }
      stopDevice(deviceId,channelId).then(res=>{
        console.log(res)
        resolve()
      }).catch(e=>{
        reject(e)
      })
    });
  }

/**
 * HLS 配置
 * @param player
 */
function videoReady(player){
    if(!player){
      return
    }
    player.ready(()=>{
      const vhs = player.tech({ IWillNotUseThisInPlugins: true }).vhs;
      if (vhs) {
        // 设置 VHS 的配置选项
        vhs.options_ = {
          // HLS 相关配置
          enableLowInitialPlaylist: true, // 启用低质量初始播放列表
          smoothQualityChange: true, // 平滑切换质量等级
          maxBufferLength: 30, // 最大缓冲时长（秒）
          maxMaxBufferLength: 600, // 最大最大缓冲时长（秒）
          maxBufferSize: 60 * 1000 * 1000, // 最大缓冲区大小（字节）
          maxSeekHole: 2, // 最大寻求空洞（秒）
          liveSyncDurationCount: 3, // 同步直播持续时间计数
          liveMaxLatencyDurationCount: 10, // 最大直播延迟持续时间计数
          maxFragLookUpTolerance: 0.2, // 最大片段查找容忍度
          manifestLoadingTimeOut: 10000, // 清单加载超时（毫秒）
          manifestLoadingMaxRetry: 3, // 清单加载最大重试次数
          manifestLoadingRetryDelay: 1000, // 清单加载重试延迟（毫秒）
          levelLoadingTimeOut: 10000, // 级别加载超时（毫秒）
          levelLoadingMaxRetry: 3, // 级别加载最大重试次数
          levelLoadingRetryDelay: 1000, // 级别加载重试延迟（毫秒）
          fragmentLoadingTimeOut: 20000, // 片段加载超时（毫秒）
          fragmentLoadingMaxRetry: 3, // 片段加载最大重试次数
          fragmentLoadingRetryDelay: 1000, // 片段加载重试延迟（毫秒）
          // 其他配置...
        };
      }
    });
  }


  /**
   * video 时间监听
   */
  function videoMonitor(){

  }

  onMounted(() => {
    getDevices()
    initVideoList()
  })

  onBeforeUnmount(()=>{
    destroyVideo()
  })
</script>

<style scoped>
  .border {
    border: solid 2px red;
  }

  .video-js .vjs-tech {
    pointer-events: none; /* 禁用指针事件 */
  }

  .vjs-error-display {
    color: red; /* 设置错误消息的颜色为红色 */
    font-weight: bold; /* 设置字体加粗 */
    margin-top: 10px; /* 设置错误消息的顶部边距 */
  }
	.el-tree-node__label {
	  white-space: normal;
	}
	.el-tree-node__children {
	  white-space: normal;
	}
</style>
